<template>
	<view :style="{paddingTop: safeArea_top + 15 + 'px'}">
		<web-view v-if="url !== 'undefined'" :src="url"></web-view>
		<view v-else class="flex-col page">
			<view class="flex-col group">
				<view class="flex-col section_1">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844631489950773.png"
						class="image_1" />
					<view class="flex-col items-center group_1">
						<text class="text">支付失败</text>
						<text class="text_1">支付失败请联系客服处理</text>
					</view>
				</view>
				<view class="flex-col group_2">
					<view @click="calltel" class="flex-col items-center button">
						<text>联系客服</text>
					</view>
					<view @click="back" class="flex-col items-center button_1">
						<text>返回</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				navi: null,
				form: '', // 来自
				timeStamp: '' ,// 时间戳
				safeArea_top: '',
				mobiles: ''
			}
		},
		onShow() {
			// console.log("onShow====", this.navi);
			if (!this.navi) {
				// console.log('付款过来的------------------');
				const sn = uni.getStorageSync("recharge_sn");
				if (sn) {
					this.checkOrderStatus(sn, this.form);
				}
			}
		},
		onLoad(option) {
			// console.log("option====", option);
			this.url = option.url
			this.navi = option.navi
			this.form = option.form
			
			const safeArea = uni.getStorageSync('safeArea')
			this.safeArea_top = safeArea.top

			setTimeout(() => {
				this.navi = null
			}, 5000)
			
			if(this.url === 'undefined'){
				let location = uni.getStorageSync("location");
				if (!location) {
				  location = { lat: 0, lng: 0 };
				}
				this.$http
				  .post(`api/user/customerService?lat=${location.lat}&lng=${location.lng}`)
				  .then((res) => {
				    let { mobile } = res;
				    this.mobiles = mobile;
				  });
			}
		},
		methods: {
			calltel(){
				if (this.mobiles) {
				  uni.showModal({
				    content: "是否拨打客服电话",
				    success: (res) => {
				      if (res.confirm) {
				        uni.makePhoneCall({
				          phoneNumber: this.mobiles + "",
				        });
				      }
				    },
				  });
				}
			},
			back(){
				uni.switchTab({
					url: "/pages/order/order"
				});
			},
			async checkOrderStatus(order_sn, form) {
				// console.log("order_sn", order_sn, form);
				const res = await this.$http.post("api/wxapp/check_order_status", {
					order_sn,
					form,
				});
				uni.removeStorageSync("recharge_sn");
				if (res.code === 1) {
					// 支付成功了
					// 跳转到 成功页面
					if (this.form === 'recharge') {
						uni.navigateBack()
					} else {
						uni.redirectTo({
							url: "/bundle/pages/pay_success/pay_success",
						});
					}
					return;
				}
				// 未支付 - - 跳转订单列表
				uni.switchTab({
					url: "/pages/order/order",
				});
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group {
			padding-bottom: 752rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.section_1 {
				padding: 46rpx 0 68rpx;
				background-color: rgb(243, 151, 53);

				.image_1 {
					align-self: center;
					width: 188rpx;
					height: 188rpx;
				}

				.group_1 {
					margin-top: 24rpx;

					.text {
						color: rgb(255, 255, 255);
						font-size: 36rpx;
						font-weight: 500;
						line-height: 50rpx;
						white-space: nowrap;
					}

					.text_1 {
						margin-top: 8rpx;
						color: rgb(255, 255, 255);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}
				}
			}

			.group_2 {
				margin-top: 80rpx;
				padding: 0 154rpx;

				.button {
					padding: 18rpx 0;
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
					white-space: nowrap;
					background-color: rgb(243, 151, 53);
					border-radius: 40rpx;
				}

				.button_1 {
					margin-top: 38rpx;
					padding: 16rpx 0;
					color: rgb(243, 151, 53);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
					white-space: nowrap;
					border-radius: 40rpx;
					border: solid 2rpx rgb(243, 151, 53);
				}
			}
		}
	}
</style>